import React, { Component } from 'react'

import { connect } from 'react-redux'
import { CHANGE_BANNER_LIST, CHANGE_PRO_LIST, REQUEST_BANNER, REQUEST_PRO } from './store/types'
import axios from 'axios'


class Page2 extends Component {
    componentDidMount() {
        this.props.getBannerList()
        this.props.getProList()
    }

    render() {

        const banner = this.props.bannerList.map(item => {
            return <li key={item.bannerid}>
                <img src={item.img} style={{ width: 150 }} alt="" />
            </li>
        })


        const pro = this.props.proList.map(item => {
            return <li key={item.proid}>
                {item.proname}
            </li>
        })
        return (
            <div>
                <h1>Page2</h1>
                <ul>
                    {banner}
                </ul>

                <ol>
                    {pro}
                </ol>
            </div>
        )
    }
}

export default connect((state) => {
    return {
        bannerList: state.pro.bannerList,
        proList: state.pro.proList
    }
}, (dis) => {
    return {
        getBannerList() {
            // fetch('/banner/list').then(res => res.json()).then(res => {
            //     dis({
            //         type: CHANGE_BANNER_LIST,
            //         payload: res.data
            //     })
            // })

            dis({ type: REQUEST_BANNER })
        },
        getProList() {
            // axios.get('/pro/list').then(res => {
            //     dis({
            //         type: CHANGE_PRO_LIST,
            //         payload: res.data.data
            //     })
            // })
            dis({ type: REQUEST_PRO, payload: { limitNum: 3 } })
        }
    }
})(Page2)